
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="${root}images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="${root}images/apple-touch-icon.png">
    <title>${obj.title}</title>
    <link rel="stylesheet" href="${root}css/seedsui.min.css">
    <style type="text/css">
    
    </style>
        <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <!--:if(!isEmpty(wxsign)){  -->
<script>  
wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: 'wx2787c3302c182d65', // 必填，公众号的唯一标识
    timestamp: ${wxsign.timestamp}, // 必填，生成签名的时间戳
    nonceStr: '${wxsign.nonceStr}', // 必填，生成签名的随机串
    signature: '${wxsign.signature}',// 必填，签名，见附录1
    jsApiList: ["onMenuShareTimeline",
                "onMenuShareAppMessage",
                "onMenuShareQQ",
                "onMenuShareWeibo",
                "onMenuShareQZone"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function(){
	
	wx.onMenuShareTimeline({
	    title: '${obj.title}', // 分享标题
	    link: 'http://m.iepsy.com/course/${obj.id}?uid=${session.user.id!}', // 分享链接
	    imgUrl: '${www}${obj.img!}', // 分享图标
	    success: function () { 
	        // 用户确认分享后执行的回调函数
	    },
	    cancel: function () { 
	        // 用户取消分享后执行的回调函数
	    }
	});
	wx.onMenuShareAppMessage({
	    title: '${obj.title}', // 分享标题
	    desc: '${session.user.nickname!}邀请你观看该视频\nUID:${session.user.id!0}', // 分享描述
	    link: 'http://m.iepsy.com/course/${obj.id}?uid=${session.user.id!}', // 分享链接
	    imgUrl: '${www}${obj.img!}', // 分享图标
	    type: 'link', // 分享类型,music、video或link，不填默认为link
	    dataUrl: '${wxsign.url!}', // 如果type是music或video，则要提供数据链接，默认为空
	    success: function () { 
	        // 用户确认分享后执行的回调函数
	        //alert("确认分享")
	        
	    },
	    cancel: function () { 
	        // 用户取消分享后执行的回调函数
	         //alert("确取消分享")
	    }
	});
})


</script>  
<!--:}  -->
</head>

<body ontouchstart="">
<header>
            <div class="titlebar">
            <a class="titlebar-button" href="javascript:back()">
            	<img src="${root}img/logo.png" style="width: 24px;height: 24px;">
            	</a>
            <div class="inputbox " style="margin:0 8px;border-radius: 40px;
    border-style: solid;
    border-width: 1px;
    border-color: #e5e5e5;" data-input="clear">
                
                <input id="key" style="padding: 2px 8px;" type="search" placeholder="心理直播间" class="search input-text">
                <i id="searchbtn" class="icon size16 icon-search" style="margin-right: 8px;"></i>
            </div>
            <a class="titlebar-button" href="${root}menu">
            	<i class="icon size24 icon-menudot"></i>
            	</a>
        </div>
        </header>
	<article style="margin-bottom: 50px;">
	<div style="background-image: url('${www}${obj.img!}');width: 100%;height: 200px;background-size: 100% 100%;
	text-align: center;">
	<span class="sticker top left" style="margin-top: 24px;margin-left: 5px;border-color:transparent;">
	<a href="javascript:back()" style="color: white;"><i class="icon size24 icon-arrowleft"></i></a></span>
	<!--:if(play==1){  -->
	<a href="${root}course/play/${obj.id}/video/${video0!}"><i class="icon size50 icon-rdoplay" style="color: white;margin-top: 80px;background-color: black;border-radius: 80px;background-color: rgba(0, 0, 0, 0.38);"></i></a>
	<!--:}else{  -->
	<a href="${root}pay/course/${obj.id!}"><i class="icon size50 icon-rdoplay" style="color: white;margin-top: 80px;background-color: black;border-radius: 80px;background-color: rgba(0, 0, 0, 0.38);"></i></a>
	<!--:}  -->
	</div>
	<ul class="tabbar tabbar-line animated">
            <li class="tab active" data-class=".tab1">
                <label class="tab-label">详情</label>
            </li>
            <li class="tab " data-class=".tab2">
                <label class="tab-label">目录</label>
            </li>
            <li class="tab" data-class=".tab3">
                <label class="tab-label">评论</label>
            </li>
            <!--:if(obj.is_exam==1){  -->
            <li class="tab " data-class=".tab4">
                <label class="tab-label">考试</label>
            </li>
            <!--:}  -->
        </ul>
        <div class="tab1 bordered" style="background-color: white;display: block;">
            <p style="padding:8px;">
            	${obj.title}<br/>
            	<small>报名人数:${obj.num!0}&nbsp;&nbsp;&nbsp;&nbsp;评论${obj.comments.~size!0}</small><br/>
            	<span style="color: red;">${obj.price}</span>
            	<span style="color: red;">免费</span>
            	<span style="color: red;">VIP视频</span>
            </p>
            <div class="group">
            <div class="sliver underline">
                <span class="peg"></span>
                <p class="sliver-title">讲师介绍</p>
            </div>
            <ul class="list">
	<!--:for(t in obj.teachers!){  -->
                <li class="list-li underline" onclick="location.href='${root}teacher/${t.id}'">
                    <div class="list-thumbnail">
                        <img data-load-src="" src="${www}${t.img}" data-error-src="images/list-default.png">
                        <div class="sticker sticker-icon top left">
                            <span class="size12 icon-fav-fill"></span>
                        </div>
                    </div>
                    <div class="list-container">
                        <div class="list-title">
                            ${t.name}
                        </div>
                        <div class="list-row">
                            <i class="list-icon icon-person color-primary"></i>
                            <p class="list-font">
                               	机构:${obj.agency.name!}
                            </p>
                        </div>
                        <div class="list-row">
                            <i class="list-icon icon-computer color-primary"></i>
                            <p class="list-font">${t.text!}</p>
                        </div>
                    </div>
                    <i class="list-icon icon-arrowright"></i>
                </li>
                <!--:}  -->
            </ul>
            </div>
            <div class="group">
            <div class="sliver underline">
                <span class="peg"></span>
                <p class="sliver-title">课程详情</p>
            </div>
            <p style="margin: 10px;">${obj.text!}</p><br/>
            <div style="margin: 10px;">${obj.html!}</div>
            </div>
            <div class="sliver underline">
                <span class="peg"></span>
                <p class="sliver-title">机构介绍</p>
            </div>
            <ul class="list">
                <li class="list-li underline" onclick="location.href='${root}agency/${obj.agency_id}'">
                    <div class="list-thumbnail">
                        <img data-load-src="" src="${www}${obj.agency.img!}" data-error-src="images/list-default.png">
                        <div class="sticker sticker-icon top left">
                            <span class="size12 icon-fav-fill"></span>
                        </div>
                    </div>
                    <div class="list-container">
                        <div class="list-title">
                            ${obj.agency.name!}
                        </div>
                        <div class="list-row">
                            <i class="list-icon icon-phone color-primary"></i>
                            <p class="list-font">
                               	${obj.agency.phone!}
                            </p>
                        </div>
                        <div class="list-row">
                            <i class="list-icon icon-computer color-primary"></i>
                            <p class="list-font">${obj.agency.text!}</p>
                        </div>
                    </div>
                    <i class="list-icon icon-arrowright"></i>
                </li>
            </ul>
        </div>
        <div class=" bordered tab2 " style="background-color: white;display: none;">
            	<ul class="list">
            	<!--:for(ch in obj.chapters!){  -->
            	<li class="list-li underline">
                    <p class="list-container">${ch.title}</p>
                </li>
                <!--:for(c in ch.list!){  -->
                <!--:if(play==1){  -->
                <li class="list-li underline" onclick="location.href='${root}${c.type}/${c.val}'">
                	<i class="list-icon icon-rdoplay"></i>
                    <p class="list-container">${c.title}</p>
                    <i class="list-icon icon-arrowright"></i>
                </li>
                <!--:}else{  -->
                 <li class="list-li underline" onclick="alert(${play==3?'\'请先购买VIP\'':'\'报名后才可观看\''})">
                	<i class="list-icon icon-rdoplay"></i>
                    <p class="list-container">${c.title}</p>
                    <i class="list-icon icon-arrowright"></i>
                </li>
                <!--:}  -->
                <!--:}  -->
                <!--:}  -->
                </ul>
        </div>
        <div class=" bordered tab3 " style="background-color: white;display: none;">
            <p style="padding:8px;">
            	暂无评论!
            </p>
        </div>
        <div class=" bordered tab4 " style="background-color: white;display: none;">
            <p class="list-li underline text-center" >
                    <button style="padding:0 8px;" class="button primary">
                    <i class="icon icon-rdohook"></i>
                    <span>开始考试</span>
                </button>
                </p>
        </div>
    </article>
    <footer>
    <ul class="tabbar tabbar-footer" style="width: 100%;">
            <li class="tab " style="" onclick="location.href='${root}'">
                <i class="icon icon-home"></i>
                <label class="tab-label">首页</label>
            </li>
            <li class="tab ${!isEmpty(favorite)?'active':''}" id="favorite" >
                <i class="icon icon-fav"></i>
                <label class="tab-label">收藏</label>
            </li>
            <li class="tab" id="zixun" style="">
                <i class="icon icon-chat"></i>
                <label class="tab-label">咨询</label>
            </li>
            <li class="tab" style="width: 5%;margin-right: 10px;padding-right: 10px;">
            <!--:if(play==1){  -->
            <a href="${root}course/play/${obj.id}/video/${video0!}" class="button block primary" style="padding:8px;border-radius: 4px;">
                    <span style="color: white;font-size: 13px;">开始学习</span>
                </a>
            <!--:}else if(play==3){  -->
            <a href="${root}vip/" class="button block primary" style="padding:8px;border-radius: 4px;">
                    <span style="color: white;font-size: 13px;">购买VIP</span>
                </a>
            <!--:}else{  -->
            <a href="${root}pay/course/${obj.id!}${isEmpty(p.uid)?'':'?uid='+p.uid}" class="button block primary" style="padding:8px;border-radius: 4px;">
                    <span style="color: white;font-size: 13px;">立即报名</span>
                </a>
            <!--:}  -->
            </li>
        </ul>
    </footer>
    <script src="${root}js/jquery-2.1.3.js"></script>
    <script src="${root}js/seedsui.min.js"></script>
    <script>
    $(function(){
    	$(".tabbar-line>.tab").click(function(){
    		
    		if($($(this).attr("data-class")).css("display")=="none"){
    			$(".bordered").css("display","none")
    			$($(this).attr("data-class")).css("display","block")
    		}
    	})
    	
    	$("#favorite").click(function(){
    		if($(this).hasClass("active")){
    			$(this).removeClass("active")
    			$.get("${root}json/favorite/delcourse?id=${obj.id!}", function(result){ });//删除收藏课程
    		}else{
    			$(this).addClass("active")
    			$.get("${root}json/favorite/addcourse?id=${obj.id!}", function(result){ });//添加收藏课程
    		}
    	})
    })
    window.addEventListener("load",function(e){
        [].slice.call(document.querySelectorAll('.tabbar-line')).forEach(function(tabbar){
            tabbar.onclick=function(e){
                [].slice.call(tabbar.querySelectorAll('.tab')).forEach(function(tab) {
                    tab.classList.remove("active");
                } );
                e.target.classList.add("active");
                //alert(e.attr("class"))
            }
        });
    },false);
    
    var actionsheet=new Actionsheet({
		data:[
			{
				text : '联系电话',
		        handler : function(s){
		        	console.log(s.target);
		        	location.href="tel:${obj.phone!}"
		        }
			},{
				text : 'QQ/微信',
		        handler : function(s){
		        	console.log(s.target);
		        	alert("联系QQ${obj.qq!}")
				}
		    }
		],
		onClickCancel:function(s){
		    s.hide();
		}
	});
    document.getElementById("zixun").onclick=function(){
		//actionsheet.setParams(actionsheetParams);
		actionsheet.show();
    };
	function back(){history.go(-1);}
	</script>
</body>
</html>
